<template>
   <div >

     <div class="app-container flex flex-col">
       <div class="app-container__section shrink-0">
         <plus-search
           v-bind="searchBinds"
           :columns="columns"
         ></plus-search>
       </div>
       <div class="app-container__section flex-1 shrink-0">
         <plus-table
           :columns="columns"
           v-bind="tableBinds"
         >
           <template #title>
             <table-title/>
           </template>
           <template #plus-cell-jobGroup="scope">
             <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
           </template>
           <template #plus-cell-status="scope">
             <el-switch
               v-model="scope.row.status"
               active-value="0"
               inactive-value="1"
               @change="handleStatusChange(scope.row)"
             ></el-switch>
           </template>
           <template #toolbar>
             <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['monitor:job:add']"
             >新增</el-button>
             <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="gSelection.length !== 1"
               @click="handleUpdate(gSelection[0])"
               v-hasPermi="['monitor:job:edit']"
             >修改</el-button>
             <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="gSelection.length === 0"
               @click="handleDelete(gSelection)"
               v-hasPermi="['monitor:job:remove']"
             >删除</el-button>
             <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['monitor:job:export']"
             >导出</el-button>
             <el-button
               type="info"
               plain
               icon="Operation"
               @click="handleJobLog"
               v-hasPermi="['monitor:job:query']"
             >日志</el-button>

             <ClockTimer :task="gGetList"/>
             <SearchAreaControl v-model="gShowSearchForm"/>
           </template>
           <template #plus-cell-action="scope">
             <el-tooltip content="修改" placement="top">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']"></el-button>
             </el-tooltip>
             <el-tooltip content="执行一次" placement="top">
               <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
             </el-tooltip>
             <el-tooltip content="任务详细" placement="top">
               <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
             </el-tooltip>
             <el-tooltip content="调度日志" placement="top">
               <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
             </el-tooltip>
           </template>
         </plus-table>
       </div>
     </div>


     <!-- 添加或修改定时任务对话框 -->
     <addJob ref="addFormRef" @refreshList="gGetList" />

      <!-- 任务日志详细 -->
     <jobDetail ref="jobDetailRef" />

   </div>
</template>

<script setup >
import {  getJob,  runJob, changeJobStatus } from "@/api/monitor/job";
import { useCommonConfig, useCommonDict } from './hook.js'
import { useDelHook, useListHook } from '@/hooks/crud/index.js'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import addJob from "./addJob.vue"
import jobDetail from "./jobDetail.vue"
const {   sys_job_group, sys_job_status } = useCommonDict()
const { proxy,apiFn,primaryKey,moduleName,beforeDelFn } = useCommonConfig()
defineOptions({
  name:'Job'
})
const router = useRouter();

// ====================列表逻辑=========================
const gSearchForm = ref({  })
const { gGetList, gAllExposeOption } = useListHook({
  listApiFn:apiFn.listApiFn,
  gSearchForm,
  beforeRequest: (reqData) => {
    return reqData
  },
  afterRequest: (resData) => {
    return resData
  }
})

const columns = computed(() => {
  return [
    {
      label: '任务编号',
      prop: 'jobId',
      hideInSearch: true,
      tableColumnProps: {
        align: 'center',
      }
    },
    {
      label: '任务名称',
      prop: 'jobName',
      tableColumnProps: {
        align: 'center',
      },

    },
    {
      label: '任务组名',
      prop: 'jobGroup',
      tableColumnProps: {
        align: 'center',
      },
      options: sys_job_group,
      valueType: 'select',
    },
    {
      label: '调用目标字符串',
      prop: 'invokeTarget',
      hideInSearch: true,
      tableColumnProps: {
        align: 'center',
      }
    },
    {
      label: 'cron执行表达式',
      prop: 'cronExpression',
      hideInSearch: true,
      tableColumnProps: {
        align: 'center',
      }
    },
    {
      label: '状态',
      prop: 'status',
      tableColumnProps: {
        align: 'center',
      },
      options: sys_job_status,
      valueType: 'select',
    },
    {
      label: '操作',
      prop: 'action',
      hideInSearch: true,
      minWidth: '80px',
      tableColumnProps: {
        align: 'center',
      }
    },
  ]
})

// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption,primaryKey }))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption } ))
// ==================删除逻辑===========================
const { gDelete } = useDelHook({
  delApiFn:apiFn.delApiFn,
  moduleName,
  beforeDelFn: (reqData) => beforeDelFn(reqData) ,
  afterDelFn: (resData) => {
    gGetList()
  }
})
const handleDelete = (data)=>{
  gDelete(data)
}


// ===================新增、修改======================
const addFormRef = ref(null)
// 新增操作
function handleAdd() {
  addFormRef.value.gOpen()
}
// 修改操作
function handleUpdate(row) {
  addFormRef.value.gOpen(row)
}




/** 任务组名字典翻译 */
function jobGroupFormat(row, column) {
  return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
}


// 任务状态修改
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
    return changeJobStatus(row.jobId, row.status);
  }).then(() => {
    proxy.$modal.msgSuccess(text + "成功");
  }).catch(function () {
    row.status = row.status === "0" ? "1" : "0";
  });
}
/* 立即执行一次 */
function handleRun(row) {
  proxy.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?').then(function () {
    return runJob(row.jobId, row.jobGroup);
  }).then(() => {
    proxy.$modal.msgSuccess("执行成功");})
  .catch(() => {});
}
/** 任务详细信息 */
const jobDetailRef = ref(null)
function handleView(row) {
  jobDetailRef.value.open(row)
}


/** 任务日志列表查询 */
function handleJobLog(row) {
  const jobId = row.jobId || 0;
  router.push('/monitor/job-log/index/' + jobId)
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/job/export", {
    ...gSearchForm.value,
  }, `job_${new Date().getTime()}.xlsx`);
}

</script>
